<template>
	<!-- 图文问诊侧边栏详细信息 -->
	<div>
		<div class="showTop">
      <div class="initTop">
        <img v-if="infoDetails.sex === '女'" :src="infoDetails.head_portrait_url?infoDetails.head_portrait_url:maleImg" class="fl"/>
        <img v-else :src="infoDetails.head_portrait_url?infoDetails.head_portrait_url:femaleImg" class="fl"/>
        <span class="fl name">{{infoDetails.regular_name}}</span>
        <span class="fl age">{{infoDetails.sex}}/{{infoDetails.age}}岁</span>
      </div>
      <div class="regular">
        <text selectable='true'>疾病：{{infoDetails.current_medical_history}}</text>
      </div>
		</div>
    <div class="showMid">
      <img :src="title1_open" class="fl"/>
      <span class="fl">病历资料</span>
    </div>
		<div class="showBtm">
      <div class="tmTop">
        <div class="titleDiv">就诊信息</div>
        <div><span>就诊时间：</span>{{infoDetails.apt_diagnose_time}}</div>
        <div><span>就诊医生：</span>{{infoDetails.doctor_name}}</div>
      </div>
      <div class="itemDiv">
        <p class="titleP"><text selectable='true'>希望获得的帮助</text></p>
        <p class="blockClass" v-if="infoDetails.want_help">
          <span v-if="infoDetails.want_help"><text selectable='true'>{{infoDetails.want_help}}　</text></span>
        </p>
        <p v-else>
          无
        </p>
      </div>
      <div class="itemDiv">
        <p class="titleP"><text selectable='true'>既往史</text></p>
        <p class="blockClass" v-if="infoDetails.anamnesis.crb || infoDetails.anamnesis.jb || infoDetails.anamnesis.qt || infoDetails.anamnesis.sss">
          <span v-if="infoDetails.anamnesis.crb"><text selectable='true'>传染病史:&nbsp;&nbsp;{{infoDetails.anamnesis.crb}}　</text></span>
          <span v-if="infoDetails.anamnesis.jb"><text selectable='true'>疾病史:&nbsp;&nbsp;{{infoDetails.anamnesis.jb}}　</text></span>
          <span v-if="infoDetails.anamnesis.sss"><text selectable='true'>手术史:&nbsp;&nbsp;{{infoDetails.anamnesis.sss}}</text></span>
          <span v-if="infoDetails.anamnesis.qt"><text selectable='true'>其它:&nbsp;&nbsp;{{infoDetails.anamnesis.qt}}　</text></span>
        </p>
        <p v-else>
          无
        </p>
      </div>
      <div class="itemDiv">
        <p class="titleP"><text selectable='true'>过敏史</text></p>
        <p class="blockClass" v-if="infoDetails.allergy_history.qt || infoDetails.allergy_history.swgm || infoDetails.allergy_history.ywgm">
          <span v-if="infoDetails.allergy_history.swgm"><text selectable='true'>食物过敏:&nbsp;&nbsp;{{infoDetails.allergy_history.swgm}}　</text></span>
          <span v-if="infoDetails.allergy_history.ywgm"><text selectable='true'>药物过敏:&nbsp;&nbsp;{{infoDetails.allergy_history.ywgm}}　</text></span>
          <span v-if="infoDetails.allergy_history.qt"><text selectable='true'>其他:&nbsp;&nbsp;{{infoDetails.allergy_history.qt}}　</text></span>
        </p>
        <p v-else>
          无
        </p>
      </div>
      <div class="itemDiv">
        <p class="titleP"><text selectable='true'>婚育史</text></p>
        <p class="blockClass" v-if="infoDetails.obsterical_history.hyzk || infoDetails.obsterical_history.syzt">
          <span v-if="infoDetails.obsterical_history.hyzk"><text selectable='true'>婚育状态:&nbsp;&nbsp;{{infoDetails.obsterical_history.hyzk}}　</text></span>
          <span v-if="infoDetails.obsterical_history.syzt"><text selectable='true'>生育妊娠状态:&nbsp;&nbsp;{{infoDetails.obsterical_history.syzt}}</text></span>
        </p>
        <p v-else>
          无
        </p>
      </div>
      <div class="itemDiv">
        <p class="titleP"><text selectable='true'>家族史</text></p>
        <p class="blockClass" v-if="infoDetails.family_history.qt || infoDetails.family_history.jzs_jsz">
          <span v-if="infoDetails.family_history.jzs_jsz"><text selectable='true'>{{infoDetails.family_history.jzs_jsz}}　</text></span>
          <span v-if="infoDetails.family_history.qt"><text selectable='true'>其他:&nbsp;&nbsp;{{infoDetails.family_history.qt}}　</text></span>
        </p>
        <p v-else>
          无
        </p>
      </div>
      <div class="itemDiv">
        <p class="titleP"><text selectable='true'>个人习惯</text></p>
        <p class="blockClass"  v-if="infoDetails.personal_habits.qt || infoDetails.personal_habits.grxg_grxg">
          <span v-if="infoDetails.personal_habits.grxg_grxg"><text selectable='true'>{{infoDetails.personal_habits.grxg_grxg}}　</text></span>
          <span v-if="infoDetails.personal_habits.qt"><text selectable='true'>其他:&nbsp;&nbsp;{{infoDetails.personal_habits.qt}}　</text></span>
        </p>
        <p v-else>
          无
        </p>
      </div>
      <div class="itemDiv">
        <p class="titleP">附件资料</p>
        <div v-if="infoDetails.upload_image.length > 0">
          <span v-for="(item, index) in infoDetails.upload_image" :key='index' >
            <img :src="item.file_url" alt="" @click="showImg(item)">
          </span>
        </div>
        <p v-else>
          无
        </p>
      </div>
		</div>
	</div>
</template>
<script>
import api from '@/api/api'
  import { mapState } from 'vuex'
	export default {
		data () {
			return {
        infoDetails: {
          jiuzhenTime: '',
          anamnesis: { // 既往史
            crb: '',
            jb: '',
            qt: '',
            sss: ''
          },
          obsterical_history: { // 婚育史
            hyzk: '',
            syzt: ''
          },
          allergy_history: { // 过敏史
            qt: '',
            swgm: '',
            ywgm: ''
          },
          family_history: { // 家族史
            qt: '',
            jzs_jsz: ''
          },
          personal_habits: { // 个人习惯
            qt: '',
            grxg_grxg: ''
          },
          upload_image: []
        },
        imgUrl: '',
        maleImg: '',
        femaleImg: '',
        title1_open: ''
			}
		},
    computed: {
      ...mapState([
        'talkInfo'
      ])
    },
    onLoad () {
      this.imgUrl = api.imgUrl
      this.maleImg = this.imgUrl + 'male.png'
      this.femaleImg = this.imgUrl + 'female.png'
      this.title1_open = this.imgUrl + 'title1_open.png'
      this.getHistory()
    },
		methods: {
      // 查看就诊记录
      getHistory () {
        let that  = this
        that.$api.emrInfo({'apt_id': that.talkInfo.apt_id}, ({'showLoading': true})).then(function (res) {
          that.infoDetails = res.data[0]
        })
      },
      // 查看图片
      showImg (item) {
        let arr = []
        for (let i = 0; i < this.infoDetails.upload_image.length; i++) {
          arr.push(this.infoDetails.upload_image[i].file_url)
        }
        mpvue.offAppHide()
        mpvue.previewImage({
          current: item.file_url, // 当前显示图片的http链接
          urls: arr // 需要预览的图片http链接列表
        })
      }
		}
	}
</script>
<style scoped lang='less'>
.showTop {
  margin: 80rpx 27rpx 0 32rpx;
  .initTop {
    padding: 55rpx 0 58rpx 0;
    height: 110rpx;
    line-height: 110rpx;
    .name {
      display: inline-block;
      margin: 0 30rpx 0 27rpx;
      font-size:36rpx;
      font-weight:500;
      color: #4A71E8;
    }
    .age {
      font-size:28rpx;
      color:rgba(102,102,102,1);
    }
    img {
      width: 110rpx;
      height: 110rpx;
      display: inline-block;
      border-radius: 100%;
    }
  }
  .regular {
    font-size:30rpx;
    font-weight:300;
    color:rgba(102,102,102,1);
    line-height:42rpx;
  }
}
.showMid {
  height: 100rpx;
  width: 100%;
  background: #4A64EA;
  margin: 17rpx 0 20rpx 0;
  font-size:32rpx;
  font-weight:400;
  color:rgba(255,255,255,1);
  line-height: 100rpx;
  img {
    width: 56rpx;
    height: 60rpx;
    display: inline-block;
    margin: 20rpx 4rpx 0 25rpx;
  }
}
.showBtm {
  margin: 0 32rpx 60rpx 27rpx;
  font-size: 30rpx;
  color: #333;
  .titleDiv {
    height:42rpx;
    font-weight:bold;
    color:rgba(51,51,51,1);
    line-height:42rpx;
    margin-bottom: 6rpx;
  }
  .tmTop {
    border-bottom: 1rpx solid #E9E9E9;
    padding: 0 0 25rpx 0;
    margin-bottom: 25rpx;
    span {
      color:#666666!important
    }
  }
  .itemDiv {
    margin-bottom: 30rpx;
    line-height:40rpx;
    color: #333;
    .blockClass{
      span{
        display: block;
      }
    }
    .titleP {
      font-weight:bold;
      display: inline-block;
      margin-bottom: 6rpx;
    }
    img {
      width: 92rpx;
      height: 70rpx;
      margin-right: 26rpx;
      padding: 6rpx;
      border: 1rpx solid #DDDDDD;
      border-radius:2rpx;
    }
  }
}
</style>
